<template>
	<div class="mobile_searcj">
		<aside class="aside1">
			<router-link to="/mobile/home">
				<h2>
					< </h2>
			</router-link>
			<form @submit.prevent="setSearch()">
				<input type="search" required placeholder="请输入书名 作者 出版社" v-model="keywords" />
				<input type="submit" value="搜索" />
			</form>
		</aside>
		<aside class="aside2">
			<ul class="menus">
				<li>
					<router-link to="/mobile/home">首页推荐</router-link>
				</li>
				<li>
					<router-link to="/mobile/bookslist">书库</router-link>
				</li>
				<li>
					<router-link to="/mobile/mine">我的</router-link>
				</li>
			</ul>
		</aside>
		<aside class="aside3">
			<aside class="aside3_head">
				<h3>历史搜索</h3>
				<i class="el-icon-delete" @click="del()"></i>
			</aside>
			<div class="history">
				<span v-for="(item,i) in hlist" :key="i">{{item}}</span>
			</div>
		</aside>
		<aside class="aside4">
			<aside class="aside4_head">
				<h3>热门搜索</h3>
			</aside>
			<div class="hot">
				<!-- <span v-for="(item,i) in hotlist" :key="i">{{item}}</span> -->
				<span>111</span>
			</div>
		</aside>
		<aside class="aside4">
			<p>111</p>
			<ul>
				<li  v-for="(item,index) in tlist" :key="item.total">
					<router-link :to="`/mobile/bookdetail/${item.books.id}`" :key="item.total"
						v-if="(item.hot!=0 && index<6) ||(item.price!=0&&index<9)">
						<img :src="`http://127.0.0.1/api/public/showimg/${item.books.picture}`" />
						<h3>{{item.book.name}}</h3>
					</router-link>
				</li>
			</ul>
		</aside>
	</div>
</template>

<script>
	//导入vuex对象
	import MobileHomeList from '@/components/mobile/MobileHomeList.vue'
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		name: 'MobileSearch',
		components: {
			MobileHomeList,
		},
		data() {
			return {
				keywords: '',
				tlist: [],
				newlist: []
			}
		},
		computed: {
			...mapState('search', ['hlist']),
			
		},
		methods: {
			//格式： mapActions ('模块名'，【"调用模块雷达付费"】)
			...mapActions('search', ['actionHistory']),
			setSearch() {
				//调用search 模块的函数 axtionHistory 并将当前组件的data数据传递过去vuex
				this.actionHistory(this.keywords);
				this.$postkv("/api/public/book/findPageKey/1/20" + '?' + "key=" + this.keywords).then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.tlist = resp.data.data;
					console.log(this.tlist);
				})
				this.keywords = '';
			},
			del() {
				this.$store.commit('search/del')
			}
		}
	}
</script>

<style scoped>
	.mobile_searcj h3 {
		line-height: 3rem;
		margin-left: 1.5rem;
	}

	.mobile_searcj .aside1 {
		border-bottom: 1px white solid;
		width: 100%;
		height: 4.5rem;
		line-height: 4.5rem;
		position: fixed;
		display: flex;
		text-align: center;
		justify-content: space-around;
		top: 0;
		background-color: #6f6352;
	}

	.mobile_searcj aside a {
		text-decoration: none;
		color: white;
	}

	.mobile_searcj aside input {
		width: 16rem;
		height: 2.5rem;
		border: white;
		border-radius: 1rem;
	}

	.mobile_searcj aside input[type='submit'] {
		width: 3rem;
		border: none;
		color: white;
		background-color: #6f6352;
		border-radius: 1rem;
		margin-left: 1.2rem;
	}

	.menus {
		background-color: #6f6352;
		margin: 0;
		padding: 0;
		list-style: none;
		height: 100%;
		margin-top: 4rem;
		display: block;
	}

	.mobile_searcj .menus li a {
		background-color: #6f6352;
		text-decoration: none;
		display: block;
		width: 33.33%;
		float: left;
		height: 3.2rem;
		line-height: 4rem;
		text-align: center;
	}

	.mobile_searcj .aside3_head,
	.aside4_head {
		display: flex;
		justify-content: space-between;
		width: 95%;
		height: 3rem;

	}

	.mobile_searcj .aside3_head i {
		line-height: 3rem;
		margin-left: 1.5rem;
	}

	.mobile_searcj span {
		line-height: 1.2rem;
		margin-left: 1.5rem;
		background-color: #f6f6f6;
		border-radius: 1.5rem;
		border: #f6f6f6 3px solid;
		display: inline-block;
		height: 1.5rem;
		width: 35%;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>